<mat-card class="card-demo">
  <mat-card-title><a href="https://github.com/angular/flex-layout/issues/197" target="_blank">
    Issue #197</a></mat-card-title>
  <mat-card-subtitle>Responsive Style directive should merge with default inline style:
  </mat-card-subtitle>
  <mat-card-content>
    <div class="containerX">
      <div class="coloredContainerX box fixed">
        <div class="box1"
             fxFlexFill
             style="font-size:12px; color:black; text-align:left;"
             [ngStyle.sm]="{'font-size': '16px', color: '#a63db8', 'text-align': 'center'}"
             ngStyle.md="font-size: 24px; color : #0000ff; text-align: right;">
          &lt;div fxFlexFill <br/>
          &nbsp;&nbsp;&nbsp;&nbsp;style="font-size:10px; color:black; text-align:'left';"<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[ngStyle.sm]="&#123;'font-size':'16px', color:#a63db8,
          text-align:'center' &#125;"<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;ngStyle.md="font-size:24px; color:#00f;"
          text-align:'right'&gt;<br/>
          &lt;/div&gt;
        </div>
      </div>
    </div>
  </mat-card-content>
  <mat-card-footer style="width:95%;padding-left:20px;margin-top:-5px;">
    <media-query-status></media-query-status>
  </mat-card-footer>
</mat-card>
